<template>
  <div class="px-[16px] pt-[16px] bg-[var(--base-color)] rounded-[8px]">
    <VForm
      ref="form"
      :model="model"
      :fieldList="fieldList"
      :rules="rules"
      :options="formOption"
      :originOption="options"
    />
  </div>
</template>
<script setup>
import VForm from "@/components/Form/index.vue";

const props = defineProps({
  data: { type: Object, default: () => ({}) },
  options:{type: Object, default: () => ({})}
});
const {options} = toRefs(props)
const form = ref();
const model = ref({});

watch(
  () => props.data,
  (val) => {
    if (val.logistics_name) {
      const {
        logistics_name,
        logistics_en_name,
        logistics_code,
        logistics_address,
        business,
        business_tel,
        finance,
        finance_tel,
        customer,
        customer_tel,
        customs_broker,
        remark,
        cls_invoice_tag,
      } = val || {};
      model.value = {
        logistics_name,
        logistics_en_name,
        logistics_code,
        logistics_address,
        business,
        business_tel,
        finance,
        finance_tel,
        customer,
        customer_tel,
        customs_broker,
        remark,
        cls_invoice_tag,
      };
    }
  }
);

const publicStyle = { style: { width: "340px" } };
const inputProps = { itemProps: { maxLength: 50 } };
const fieldList = [
  { label: "基础信息", type: "title" },
  {
    field: "logistics_name",
    label: "物流商中文名称",
    ...publicStyle,
    ...inputProps,
  },
  {
    field: "logistics_en_name",
    label: "物流商英文名称",
    ...publicStyle,
    ...inputProps,
  },
  { type: "br" },
  {
    field: "logistics_code",
    label: "物流商代码",
    ...publicStyle,
    ...inputProps,
  },
  {
    field: "logistics_address",
    label: "物流商公司地址",
    ...publicStyle,
    itemProps: { maxLength: 200 },
  },
  { type: "br" },
  {
    field: "business",
    label: "业务联系人",
    style: { width: "140px" },
    ...inputProps,
    ...publicStyle,
  },
  {
    field: "business_tel",
    label: "业务联系电话",
    style: { width: "208px" },
    ...inputProps,
    ...publicStyle,
  },
  { type: "br" },
  {
    field: "finance",
    label: "财务联系人",
    style: { width: "140px" },
    ...inputProps,
    ...publicStyle,
  },
  {
    field: "finance_tel",
    label: "财务联系电话",
    style: { width: "200px" },
    ...inputProps,
    ...publicStyle,
  },
  { type: "br" },
  {
    field: "customer",
    label: "客服联系人",
    style: { width: "140px" },
    ...inputProps,
    ...publicStyle,
  },
  {
    field: "customer_tel",
    label: "客服联系人电话",
    style: { width: "200px" },
    ...inputProps,
    ...publicStyle,
  },
  { type: "br" },
  {
    field: "customs_broker",
    label: "对应报关行",
    style: { width: "200px" },
    ...inputProps,
    ...publicStyle,
  },
  {
    field: "cls_invoice_tag",
    label: "清关发票模板",
    style: { width: "200px" },
    type: "select",
    originField:'cls_invoice_tag',
    ...publicStyle,
  },
  { type: "br" },
  {
    field: "remark",
    type: "textarea",
    label: "备注",
    itemProps: { maxLength: 200 },
    full: true,
    style: {
      width: "720px",
    },
    itemProps: { maxLength: 200 },
    autosize: { minRows: 2, maxRows: 6 },
  },
];

const rules = reactive({
  logistics_name: [
    { required: true, message: "请输入物流商名称", trigger: "blur" },
  ],
  logistics_en_name: [
    { required: true, message: "请输入物流商英文名称", trigger: "blur" },
  ],
  logistics_code: [
    { required: true, message: "请输入物流商代码", trigger: "blur" },
  ],
});

const formOption = {
  inline: true,
  labelPosition: "top",
};

defineExpose({ form });
</script>
